<template>
  <div :class="['search', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="web-box" v-if="$ua.isFromPc()">
      <div class="head-search">
        <el-input placeholder="请输入内容" @keyup.enter.native="search" v-model="keyword" class="input-with-select">
          <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <ul class="keyword-list clearfix">
          <li class="keyword">搜索推荐：</li>
          <li v-for="(item, index) in searchList" :key="index" class="keyword" @click="chooseRecommend(item)">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="search-result">
        搜索结果：
      </div>
      <div v-if="artList.length > 0" class="user-list">
        <div class="relate-user">
          <span class="text">相关用户</span>
          <span class="line"></span>
        </div>
        <div class="content-list-box">
          <div v-for="(item, index) in artList" class="content-list clearfix" :key="index" @click="goArtHome(item.data_id)">
            <el-image v-if="item.photo" fit="cover" :src="item.photo" alt="" class="img" />
            <div class="text">
              <div class="title" v-html="keyRegExp(item.name, keyword)">
              </div>
              <div class="second-title">
                {{ item.position }}
              </div>
              <div class="desc" v-html="keyRegExp(item.introduction, keyword)">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="workList.length > 0" class="works-list">
        <div class="relate-user">
          <span class="text">相关作品</span>
          <span class="line"></span>
        </div>
        <div class="content-list-box">
          <div class="content-list clearfix" v-for="(item, index) in workList" @click="goArtWork(item.data_id, item.work_type)">
            <el-image v-if="item.thumbnail" fit="cover" :src="item.thumbnail" alt="" class="img" />
            <div class="text">
              <div class="title" v-html="keyRegExp(item.name, keyword)">
              </div>
              <div class="desc">
                <span class="art-name" v-html="keyRegExp(item.art_name, keyword)"></span>
                <span class="material">{{ item.material }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="artList.length == 0 && workList.length == 0" class="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <div v-else class="phone-box">
      <client-only>
        <form action="/">
          <van-search
            v-model="keyword"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
      </client-only>
      <div class="search-result">
        搜索结果
      </div>
      <div class="relate-user" v-if="artList.length > 0">
        <span class="text">相关用户</span>
        <span class="line"></span>
      </div>
      <div class="user-box" v-if="artList.length > 0">
        <div class="content" v-for="(item, index) in artList" :key="index">
          <img :src="item.photo" alt="">
          <div class="user-info">
            <div class="name" v-html="keyRegExp(item.name, keyword)">
            </div>
            <div class="work-total">
              <span class="name">
                作品
              </span>
              <span class="total">
                {{ item.works_total }}
              </span>
            </div>
            <div class="focus-total">
              <span class="name">
                粉丝
              </span>
              <span class="total">
                {{ item.focus_total }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="relate-user" v-if="workList.length > 0">
        <span class="text">相关作品</span>
        <span class="line"></span>
      </div>
      <div class="work-box" v-if="workList.length > 0">
        <div class="content" v-for="(item, index) in workList" :key="index">
          <img :src="item.thumbnail" alt="">
          <div class="work-info">
            <div class="name" v-html="keyRegExp(item.name, keyword)">
            </div>
            <div class="art-name">
              {{ item.art_name }}
            </div>
            <div class="material">
              {{ item.material }}
            </div>
          </div>
        </div>
      </div>
      <div class="empty" v-if="artList.length == 0 && workList.length == 0">
        无搜索结果
      </div>
    </div>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
export default {
  data() {
    return {
      keyword: '',
      artList: [],
      workList: [],
      searchList: [
        '油画',
        '文艺复兴',
        '热点文章'
      ]
    }
  },
  mounted() {
    if (this.$route.query.search) {
      this.keyword = this.$route.query.search
      this.search()
    }
    window.scrollTo(0, 0);
  },
  methods: {
    getImgUrl,
    onSearch() {
      this.search()
    },
    onCancel() {
      this.$router.go(-1)
    },
    keyRegExp(str,key) {  // 搜索关键字高亮显示
      // 正则匹配中文、英文关键字高亮，高亮后的关键字和之前的大小写保持一致
      var key  = key;//这里定义关键词
      key = '('+key.replace(/([\+\.\*\|\?\-\(\[\^\$])/g,'\\$1' ).replace(/\s+/g,'|')+')';//把匹配关键字中的正则符转义
      var patt = new RegExp(key ,'igm'); //传  igm  可避免关键词后面的空格造成文字不匹配问题
      var str2 = str.replace(patt,"<span style='color:#f00;'>$1</span>");
      return str2;
    },
    search() {
      const params = {
        key: this.keyword
      }
      this.$api.search(params).then(res => {
        console.log(res)
        if (res.status == '$SUCCESS') {
          this.artList = Array.isArray(res.result.art_list) ? res.result.art_list : []
          this.workList = Array.isArray(res.result.work_list) ? res.result.work_list : []
        }
      })
    },
    chooseRecommend(keyWork) {
      this.keyword = keyWork
      this.search()
    },
    goArtHome(id) {
      this.$router.push({ path: '/personal', query: { id } })
    },
    goArtWork(data_id, type) {
      console.log('点击跳转', data_id, type)
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id, workType: this.workType } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .search {
    &.z-web {
      .web-box {
        min-height: 100vh;
        padding: 60px 480px;
        background-color: #fff;

        .head-search {
          padding: 0 100px;
          .keyword-list {
            margin: 23px 0 60px;
          }

          .keyword {
            float: left;
            margin-right: 30px;
            cursor: pointer;

            &:first-child {
              margin-right: 10px;
            }
          }

          ::v-deep(.el-input__inner) {
            height: 40px;
            border-radius: 0;
          }

          ::v-deep(.el-input-group__append) {
            width: 120px;
            border-radius: 0;
            text-align: center;
            background: #000;
          }
        }

        .relate-user {
          position: relative;

          .text {
            width: 100px;
            position: absolute;
            left: 0;
            font-size: 20px;
            font-family: 楷体;
            font-weight: bold;
            color: #000000;
            line-height: 30px;
            background-color: #fff;
          }

          .line {
            display: inline-block;
            height: 1px;
            width: 100%;
            background: #ccc;
          }
        }

        .content-list-box {
          margin: 24px 0 60px;
          .content-list {
            cursor: pointer;
            margin-bottom: 24px;
            display: flex;

            &:last-child {
              margin-bottom: 0;
            }
            ::v-deep(.el-image) {
              width: 180px;
              height: 180px;
              flex-basis: 180px;
              // float: left;
              margin-right: 32px;
            }

            .text {
              flex: 1;
              .title {
                font-size: 24px;
                font-family: Source Han Serif SC;
                font-weight: 600;
                color: #000;
                margin: 15px 0;
              }

              .second-title {
                font-size: 14px;
                font-family: Source Han Serif SC;
                font-weight: 600;
                color: #333;
                margin-bottom: 10px;
              }

              .desc {
                font-size: 14px;
                // font-family: Source Han Serif SC;
                font-weight: 600;
                color: #333;

                .art-name {
                  display: inline-block;
                  margin-right: 10px;
                }
              }
            }
          }
        }

        .search-result {
          font-size: 16px;
          color: #666;
          font-weight: 600;
          margin-bottom: 30px;
        }
      }
    }

    &.z-phone {
      .phone-box {
        .search-result {
          padding: pxtorem(32) pxtorem(24);
          font-size: pxtorem(22);
          font-weight: 800;
          color: #666666;
        }

        .relate-user {
          position: relative;
          padding: 0 pxtorem(24);
          margin-bottom: pxtorem(33);

          .text {
            width: pxtorem(104);
            position: absolute;
            left: pxtorem(24);
            font-size: pxtorem(24);
            font-family: 楷体;
            font-weight: bold;
            color: #000000;
            background-color: #fff;
          }

          .line {
            display: inline-block;
            height: pxtorem(2);
            width: 100%;
            background: #ccc;
          }
        }

        .user-box {
          padding: 0 pxtorem(24);
          margin-bottom: pxtorem(60);
          .content {
            width: 100%;
            height: pxtorem(200);
            background: #FFFFFF;
            box-shadow: 0px 3px 16px 0px rgba(146,146,146,0.35);
            padding: pxtorem(40);
            margin-bottom: pxtorem(24);

            img {
              width: pxtorem(120);
              height: pxtorem(120);
              margin-right: pxtorem(32);
              vertical-align: top;
            }

            .user-info {
              display: inline-block;
              .name {
                font-size: pxtorem(28);
                font-weight: 600;
                color: #333333;
                vertical-align: top;
                margin-top: pxtorem(25);
                margin-bottom: pxtorem(19);
              }

              .work-total,
              .focus-total {
                font-size: pxtorem(16);
                font-weight: 600;
                color: #333333;
                display: inline-block;
                margin-right: pxtorem(32);
                .name {
                  margin-right: pxtorem(5);
                }

                .total {
                  font-size: pxtorem(24);
                }
              }
            }
          }
        }

        .work-box {
          padding: 0 pxtorem(24);
          .content {
            margin-bottom: pxtorem(22);
            &:last-child {
              margin-bottom: 0;
            }

            img {
              width: pxtorem(240);
              height: pxtorem(180);
              margin-right: pxtorem(32);
              vertical-align: top;
            }

            .work-info {
              display: inline-block;

              .name {
                font-size: pxtorem(28);
                font-weight: 600;
                color: #000;
                margin: pxtorem(24) 0;
              }

              .art-name,
              .material {
                font-size: pxtorem(22);
                color: #333;
                font-weight: 600;
                display: inline-block;
                margin-right: pxtorem(10);
              }
            }
          }
        }

        .empty {
          font-size: pxtorem(24);
          font-weight: 800;
          color: #000;
          text-align: center;
        }
      }
    }
  }
</style>